// .jingdong{
//     width: 100px;
//     height: 100px;
//     background-color:yellow;
// }
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    display: block;
}
.jingdong{
        header{
            display: flex;
            width: 100%;
            height: 40px;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            background-color: rgba(201, 21, 35, 0);
            .logo{
                width: 70px;
                background-color: yellow;
                background: url(../images/jd-sprites.png)no-repeat;
                background-size: 200px 200px;
                background-position: 11px -103px;
                background-clip: content-box;
                background-origin: content-box;
                padding: 1px;
                margin-top: 3px;
            }
            .search{
                flex: 1;
                padding: 5px 0;
                // background-color:pink;
                position: relative;
                &::after{
                    content: "";
                    display:block;
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 13px;
                    left: 5px;
                    background: url(../images/jd-sprites.png)no-repeat;
                    background-size: 200px 200px;
                    background-position: -120px 1px;
                }
                input{
                    width:100%;
                    height: 100%;
                    border-radius: 30px;
                    border: none;
                    outline: none;
                    padding-left: 22px;
                }
            }
            .btn{
                width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                cursor: pointer;
            }
        }
        .lunbotu{
            img{
                width: 100%;
                display: block;
            }
        }
        .list{
            ul{
                display: flex;
                flex-wrap: wrap;    
                li{
                    width: 25%;
                    a{
                        padding: 5px 5px;
                        img{
                            display: block;
                            width: 50%;
                            margin:0 auto;
                        }
                        p{
                            text-align: center;
                            font-size: 14px;
                            color: skyblue;
                        }
                    }
                }
            }            
        }  
        .Countdown{
            .countdown{
                display: flex;
                justify-content: space-between;
                padding: 5px;
                .clock{
                    width: 20px;
                    height: 22px;
                    background: url(../images/jd-sprites.png) no-repeat;
                    background-position: -83px -109px;
                    background-size: 200px 200px;
                }
                .fonts{
                    color: red;
                    text-align: center;
                }
                a{
                    color: red;
                    &::after{
                        content: "";
                        display: inline-block;
                        width: 10px;
                        height:10px ;  
                        border-bottom: 1px solid red;
                        border-right: 1px solid red; 
                        transform: rotate(-45deg);               
                     }
                }
            }
            .content{
                display: flex;
                a{
                    width: 33.33%;
                    position: relative;
                    text-align: center;
                    span{
                        position: absolute;
                        top: 10px;
                        right: 20px;
                        color: sandybrown;
                    }
                    img{
                        width: 100%;
                        display: block;
                    }
                    p{
                        color: tomato;
                    }
                }
            }
        }
        .footer{
            .footers{
                position: relative;
                .clearfix{
                    position: absolute;
                    bottom: 5px;
                    width: 100%;
                    left: 0;
                    li{
                        float: left;
                        width: 50%;
                    }
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                .clearfix::after{
                    content: "";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                img{
                display: block;
                width: 100%;
                }
            }
            .matter{
                display: flex;
                a{
                    width:33.33%;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
            .details{
                display: flex;
                flex-wrap: wrap;
                a{
                    width: 50%;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
        .zhuti{
            margin-top: 5px;
            img{
                display: block;
                width: 100%;
            }
        } 
        .zhutijie{
            .clearfix::after{
                content: "";
                display: block;
                height: 0;
                line-height: 0;
                clear: both;
                visibility: hidden;
            }
            .title{
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: indianred;
             }
             .zhutijiao{
                 padding: 5px;
                img{
                    display: block;
                    width: 100%;
                }
            }
        }
        .articles{
            a:nth-child(-n+2){
                width: 50%;
                img{
                    display: block;
                    width: 100%;
                }
            }
            a{
                width: 25%;
                float: left;
                img{
                    width: 100%;
                    display: block;
                }
             }
             a:nth-child(5){
                clear: both;
            }
            
        } 
        .brand{
            .brand-title{
                text-align: center;
                color: springgreen;
            }
            .merchandise{
                display: flex;
                padding: 5px;
                a:nth-child(1){
                    width: 40%;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
                a:nth-child(2){
                    width: 30%;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
                a:nth-child(3){
                    width: 30%;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
            }
            .brand-footer{
                padding: 5px;
                img{
                    width: 100%;
                    display: block;
                }
            }
        }
        .like{
            display: flex;
            padding: 5px;
            justify-content: space-between;
            a{
                display: inline-block;
                color: red;
            }
            .like-more{                
                font-size: 13px;
                img{
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    vertical-align: sub;
                }
            }
        }
        .guess_content{
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 50%;
                    padding: 3px;
                    .li-div{
                        display: flex;
                        justify-content: space-between;
                    }
                    img{
                        width: 100%;
                        display: block;
                    }
                    p{
                        font-size: 14px;
                    }
                }
            }
        }
        .weibu{
            .click-more{
                height: 40px;
                line-height: 33px;
                border-top: 1px solid gray;
                border-bottom: 1px solid gray;
                text-align: center;
                padding: 3px;
                color: grey;    
            }
            .login{
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                a{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                    border-right: 1px solid  black;
                    color: grey;
                }
                a:nth-child(4){
                    border-right: none;
                }
            }
            .customer{
                display: flex;
                border-top: 1px solid gray;
                padding: 10px 0;
                a{
                    flex: 1;
                    text-align: center;
                    span{
                    width: 33px;
                    height: 33px;
                    display: inline-block;
                    }
                }
                a:nth-child(1) span{
                    background: url(../images/jd-sprites.png)no-repeat;
                    background-position:-120px -70px;
                    background-size: 200px 200px;
                }
                a:nth-child(2) span{
                    background: url(../images/jd-sprites.png)no-repeat;
                    background-position:-120px -70px;
                    background-size: 200px 200px;
                }
                a:nth-child(3) span{
                    background: url(../images/jd-sprites.png)no-repeat;
                    background-position:-120px -70px;
                    background-size: 200px 200px;
                }
            }
            .gaoshi{
                font-size: 14px;
                color: gray;
                border-top: 1px solid gray;
                text-align: center;
                padding: 10px;
                margin-bottom: 50px;
            }
        }
        footer{
            width: 100%;
            height: 50px;
            position: fixed;   
            bottom: 0;
            left: 0;
            background-color: white;
            display: flex;
            a{
                flex: 1;
                text-align: center;
                img{
                    width: 64px;
                }
            }
        }
}